<template>
  <div class="box">
    <!-- input输入框 -->
    <el-form class="topinput" label-width="80px">
      <el-form-item label="车辆类型:">
        <el-select v-model="form.region" placeholder="请选择">
          <el-option label="123" value="aVolume" />
          <el-option label="456" value="bVolume" />
          <el-option label="789" value="cVolume" />
        </el-select>
      </el-form-item>
      <el-form-item label="车牌号码:">
        <el-input placeholder="请输入车牌号码" />
      </el-form-item>
      <el-button class="search">搜索</el-button>
      <el-button class="reset">重置</el-button>
    </el-form>
    <!-- 选择按钮 -->
    <div class="btn">
      <button>全部23</button>
      <button>可用11</button>
      <button>停用12</button>
    </div>
    <!-- 表格 -->
    <div class="form">
      <el-button class="addbtn">新增车辆</el-button>
      <el-table :data="tableList" stripe style="width: 100%">
        <el-table-column label="序号" width="60" />
        <el-table-column prop="licensePlate" label="车牌号码" width="136" />
        <el-table-column prop="truckTypeName" label="车辆类型" width="224" />
        <el-table-column prop="driverNum" label="司机数量" width="158" />
        <el-table-column prop="status" label="车辆状态" width="120" />
        <el-table-column prop="deviceGpsId" label="GPS设备ID" width="182" />
        <el-table-column prop="allowableLoad" label="实载重量(T)" width="182" />
        <el-table-column prop="allowableVolume" label="实际体积(方)" width="120" />
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              style="font-size: 13px;color:blue"
              type="text"
              size="small"
              @click="handleClick(scope.row)"
            >查看详情</el-button>
            <span class="scopespan">|</span>
            <el-button
              style="font-size: 13px; color:blue"
              type="text"
              size="small"
            >启用</el-button>
            <span class="scopespan">|</span>
            <el-button
              style="font-size: 13px; color:blue"
              type="text"
              size="small"
            >匹配司机</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="+10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableList.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getImageCarList } from '@/api/user'
export default {
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 1,
      form: {
        region: ''
      },
      tableList: []
    }
  },
  created() {
    this.getImageCarList()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    async  getImageCarList() {
      this.tableList = await getImageCarList()
      console.log(this.tableList)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  padding: 23px 20px 20px;
}
.topinput {
background-color: #fff;
width: 100%;
 display: flex;
padding: 20px 20px 20px;
.el-form-item {
 padding-left: 10px;
 margin-bottom: 0;
 }
 .el-input {
 width: 339px;
margin-right: 40px;
 }
}
.search {
 width: 90px;
 height: 40px;
 border-radius: 5px;
 background-color: #e2553b;
 color: #fff;
 margin-left: 30px;
}
.reset {
 margin-left: 15px;
 border-radius: 5px;
 line-height: 10px;
}
.el-option {
color: red !important;
}
.form {
  margin-top: 20px;
  padding: 28px;
  background-color: #fff;
  .addbtn {
    width: 100px;
    height: 40px;
    border-radius: 5px;
    background-color: #e2553b;
    color: #fff;
    margin-bottom: 20px;
  }
}
.el-select {
  width: 314px;
  margin-right: 20px;
}
.block {
  width: 465px;
  margin: auto;
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.scopespan {
  margin: 0 8px;
  color: #dcdfe6;
}
.btn{
  width: 100%;
  height: 48px;
  background-color: #fff;
  margin-top: 20px;
  button{
    width: 120px;
    height: 48px;
  background-color: #fff;
  border: none !important;
  font-size: 14px;
  }
}
</style>
